<template>
  <div class="test">
    <div v-show="isShowAnnouncement">
      <h2>公告</h2>
    </div>
  </div>
</template>

<script setup>
  import { onBeforeUnmount, onUnmounted, reactive, ref } from 'vue'
  import { Announcement as AnnouncementSDK } from '@polyv/interactions-receive-sdk';

  const isShowAnnouncement = ref(false); // 是否显示公告
  const $data = reactive({
    announcementSdk: null,// 公告SDK实例
  })

  $data.announcementSdk = new AnnouncementSDK();

  $data.announcementSdk.on($data.announcementSdk.events.BULLETIN, function(msg) {
    console.log('接收到公告');
    console.log(msg);
    isShowAnnouncement.value = true
    console.error(isShowAnnouncement)
  });
  $data.announcementSdk.on($data.announcementSdk.events.REMOVE_BULLETIN, function(msg) {
    console.log('公告已关闭：');
    isShowAnnouncement.value = false
    console.log(msg);
  });
  onBeforeUnmount(() => {
    if($data.announcementSdk){
      $data.announcementSdk.destroy();
    }
  })
</script>
<style scoped>
  .test {
    position: fixed;
    right: 20px;
    top: 20px;
  }
  .test h2 {
    color: red;
  }
</style>

